<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    width: {
      type: String,
      default: "0px"
    },
    height: {
      type: String,
      default: "0px"
    },
    data: {}
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec);
      this.chart.setOption(this.option);
    }
  },
  created() {
    const xData2 = (function() {
      const data = [];
      for (let i = 1; i < 3; i++) {
        data.push(i + "month");
      }
      return data;
    })();
    this.color = [
      "#F84B4B",
      "#B4501E"
    ];
    this.option = {
      backgroundColor: "#fff",
      color: this.color,
      // title: {
      //   text: "单位(t)",
      //   left: 0,
      //   textStyle: {
      //     color: "#999",
      //     fontSize: "12"
      //   }
      // },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        axisPointer: {
          textStyle: {
            color: "#fff"
          }
        }
      },
      legend: {
        width: "90%",
        itemWidth: 10,
        itemHeight: 10,
        right: 0,
        textStyle: {
          color: "#90979c",
          fontSize: "12"
        },
        data: [
          { name: "#1配电室", icon: "circle" },
          { name: "#2配电室", icon: "circle" }
        ]
      },
      label: {
        formatter: "{c|{c}占比：}{c|{d}%}\n{hr|} \n  {b|{b}}",
        borderWidth: 1,
        borderRadius: 4,
        shadowBlur: 3,
        shadowOffsetX: 2,
        shadowOffsetY: 2,
        shadowColor: "#999",
        padding: [0, 7],
        rich: {
          c: {
            fontSize: 12,
            color: "#666"
          },
          hr: {
            borderColor: "#ccc",
            width: "100%",
            borderWidth: 0.5,
            height: 0
          },
          b: {
            fontSize: 12
          },
          per: {
            color: "#eee",
            backgroundColor: "#334455",
            padding: [2, 4],
            borderRadius: 2
          }
        }
      },
      series: [
        {
          title: "11",
          name: "访问来源",
          type: "pie",
          radius: ["30%", "50%"],
          center: ["50%", "60%"],
          data: [
            { value: 200, name: "#1配电室" },
            { value: 400, name: "#2配电室" },
          ]
        }
      ]
    };
  }
};
</script>
